<template>
  <v-dialog v-model="dialog" max-width="800px" scrollable>
    <v-card>
      <v-card-title class="d-flex align-center">
        <v-icon left color="primary">mdi-file-document-outline</v-icon>
        日志详情
        <v-spacer />
        <v-btn
          icon="mdi-close"
          variant="text"
          @click="close"
        />
      </v-card-title>
      
      <v-divider />
      
      <v-card-text class="pa-0">
        <v-container>
          <v-row v-if="logData">
            <!-- 基本信息 -->
            <v-col cols="12">
              <v-card variant="outlined" class="mb-4">
                <v-card-title class="text-h6 bg-primary text-white">
                  <v-icon left>mdi-information</v-icon>
                  基本信息
                </v-card-title>
                <v-card-text>
                  <v-row>
                    <v-col cols="12" md="6">
                      <v-text-field
                        label="日志标题"
                        :model-value="logData.title"
                        readonly
                        variant="outlined"
                        density="compact"
                      />
                    </v-col>
                    <v-col cols="12" md="6">
                      <v-text-field
                        label="日志类型"
                        :model-value="getLogTypeText(logData.type)"
                        readonly
                        variant="outlined"
                        density="compact"
                      >
                        <template #prepend-inner>
                          <v-chip
                            :color="getLogTypeColor(logData.type)"
                            size="small"
                            variant="flat"
                          >
                            {{ getLogTypeText(logData.type) }}
                          </v-chip>
                        </template>
                      </v-text-field>
                    </v-col>
                    <v-col cols="12" md="6">
                      <v-text-field
                        label="创建时间"
                        :model-value="formatDateTime(logData.createTime)"
                        readonly
                        variant="outlined"
                        density="compact"
                      />
                    </v-col>
                    <v-col cols="12" md="6">
                      <v-text-field
                        label="用户IP"
                        :model-value="logData.remoteAddr"
                        readonly
                        variant="outlined"
                        density="compact"
                      />
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </v-col>
            
            <!-- 请求信息 -->
            <v-col cols="12">
              <v-card variant="outlined" class="mb-4">
                <v-card-title class="text-h6 bg-success text-white">
                  <v-icon left>mdi-web</v-icon>
                  请求信息
                </v-card-title>
                <v-card-text>
                  <v-row>
                    <v-col cols="12" md="8">
                      <v-text-field
                        label="请求URI"
                        :model-value="logData.requestUri"
                        readonly
                        variant="outlined"
                        density="compact"
                      />
                    </v-col>
                    <v-col cols="12" md="4">
                      <v-text-field
                        label="请求方法"
                        :model-value="logData.method"
                        readonly
                        variant="outlined"
                        density="compact"
                      >
                        <template #prepend-inner>
                          <v-chip
                            :color="getMethodColor(logData.method)"
                            size="small"
                            variant="flat"
                          >
                            {{ logData.method }}
                          </v-chip>
                        </template>
                      </v-text-field>
                    </v-col>
                    <v-col cols="12">
                      <v-textarea
                        label="用户代理"
                        :model-value="logData.userAgent"
                        readonly
                        variant="outlined"
                        rows="2"
                        auto-grow
                      />
                    </v-col>
                  </v-row>
                </v-card-text>
              </v-card>
            </v-col>
            
            <!-- 请求参数 -->
            <v-col cols="12" v-if="logData.params">
              <v-card variant="outlined" class="mb-4">
                <v-card-title class="text-h6 bg-info text-white">
                  <v-icon left>mdi-code-json</v-icon>
                  请求参数
                  <v-spacer />
                  <v-btn
                    icon="mdi-content-copy"
                    variant="text"
                    size="small"
                    @click="copyToClipboard(logData.params)"
                  />
                </v-card-title>
                <v-card-text>
                  <v-textarea
                    :model-value="formatJson(logData.params)"
                    readonly
                    variant="outlined"
                    rows="6"
                    auto-grow
                    class="code-textarea"
                  />
                </v-card-text>
              </v-card>
            </v-col>
            
            <!-- 异常信息 -->
            <v-col cols="12" v-if="logData.exception">
              <v-card variant="outlined" class="mb-4">
                <v-card-title class="text-h6 bg-error text-white">
                  <v-icon left>mdi-alert-circle</v-icon>
                  异常信息
                  <v-spacer />
                  <v-btn
                    icon="mdi-content-copy"
                    variant="text"
                    size="small"
                    @click="copyToClipboard(logData.exception)"
                  />
                </v-card-title>
                <v-card-text>
                  <v-textarea
                    :model-value="logData.exception"
                    readonly
                    variant="outlined"
                    rows="8"
                    auto-grow
                    class="code-textarea"
                  />
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-container>
      </v-card-text>
      
      <v-divider />
      
      <v-card-actions>
        <v-spacer />
        <v-btn
          color="primary"
          variant="text"
          @click="close"
        >
          关闭
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useMessage } from '@/composables/useMessage'

// 接口类型定义
interface LogItem {
  id: string
  title: string
  type: string
  requestUri: string
  method: string
  remoteAddr: string
  userAgent: string
  params: string
  exception: string
  createTime: string
}

// Props
interface Props {
  modelValue: boolean
  logData?: LogItem | null
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  logData: null
})

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

// 响应式数据
const { show: showMessage } = useMessage()

// 计算属性
const dialog = computed({
  get: () => props.modelValue,
  set: (value: boolean) => emit('update:modelValue', value)
})

// 关闭对话框
const close = () => {
  dialog.value = false
}

// 获取日志类型颜色
const getLogTypeColor = (type: string): string => {
  switch (type) {
    case '1':
      return 'primary'
    case '2':
      return 'error'
    default:
      return 'default'
  }
}

// 获取日志类型文本
const getLogTypeText = (type: string): string => {
  switch (type) {
    case '1':
      return '接入日志'
    case '2':
      return '错误日志'
    default:
      return '未知类型'
  }
}

// 获取请求方法颜色
const getMethodColor = (method: string): string => {
  switch (method?.toUpperCase()) {
    case 'GET':
      return 'success'
    case 'POST':
      return 'primary'
    case 'PUT':
      return 'warning'
    case 'DELETE':
      return 'error'
    default:
      return 'default'
  }
}

// 格式化日期时间
const formatDateTime = (dateTime: string): string => {
  if (!dateTime) return ''
  return new Date(dateTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 格式化JSON
const formatJson = (jsonStr: string): string => {
  if (!jsonStr) return ''
  try {
    const parsed = JSON.parse(jsonStr)
    return JSON.stringify(parsed, null, 2)
  } catch {
    return jsonStr
  }
}

// 复制到剪贴板
const copyToClipboard = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    showMessage('已复制到剪贴板', 'success')
  } catch (error) {
    console.error('复制失败:', error)
    showMessage('复制失败', 'error')
  }
}
</script>

<style scoped>
.code-textarea :deep(.v-field__input) {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
}

.v-card-title {
  position: sticky;
  top: 0;
  z-index: 1;
}
</style> 